<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
        padding: 18px 22px 22px 22px;
        background-color: rgb(240, 242, 245);
        margin-bottom: 80px;
        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }
    }
    .form-operator-button{
        background-color: #fff;
        position: fixed;
        width: 100%;
        left: 0px;
        right: 0;
        bottom: 33px;
        height: 64px;
        line-height: 64px;
        text-align: right;
        box-shadow: 0 -1px 2px 0 rgba(0,0,0,.05);
        z-index: 10;
    }
    .form-el-radion{
        line-height: 30px;
        padding: 5px 0px;
        width: 100%;
    }
    .hex-form-inf {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        cursor: pointer;
        margin-right: 40px;
        position: relative;
        min-height: 33px;
        margin-left: 60px;
        line-height: 33px;
    }
    .hex-form-inf-content-show {
        font-size: 14px;
        font-weight: 500;
    }
    .hex-form-inf-content{
        font-size: 14px;
        font-weight: 500;
        display: none;
    }
    .hex-form-inf-icon {
        font-size: 20px;
        margin-top: 5px;
        position: absolute;
        right: 0px;
    }
    .hex-form-inf .hex-form-inf-content-show{
      padding: 0 4%;
      background-color: gainsboro;
      border-radius: 8px;
    }
</style>
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="goWarnConf">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content">告警配置详情</div>
        </div>
      </div>
      <div class="dataFrom">
        <el-form ref="form" :model="form"label-position="left" label-width="240px">
          <div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="预警类型描述" prop="param9">
                  <el-input type="textarea" :rows="1" v-model="form.param9" :disabled="true" style="width: 400px;" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    预警类型的描述
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="预警类型" prop="type">
                  <el-select v-model="form.type" :disabled="true" placeholder="请选择" style="width: 400px;">
                    <el-option v-for="item in this.dict.app_warn_conf_type" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">通过系统类型的不同来区分不同的监控点</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="form.type=='LABEL_TASK_FAIL'">
              <el-col :span="12">
                <el-form-item label="分组标签" prop="labelCode">
                  <el-select disabled style="width: 400px" v-model="form.labelCode" placeholder="请选择" >
                    <el-option
                      v-for="item in labelList"
                      :key="item.labelCode"
                      :label="item.labelName"
                      :value="item.labelCode">
                      <span style="float: left">{{ item.labelCode }} | {{ item.labelCode }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.labelLevel== '1' ? '系统级' : '平台级' }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    标签
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否邮件通知" prop="isMailNotic">
                  <el-switch @change="checkNotic" v-model="form.isMailNotic" :disabled="true" active-value="1"
                    inactive-value="2" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">选择邮件通知，则监控到异常后，系统会自动向通知对象发送相关异常邮件</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否短信通知" prop="isSmsNotic">
                  <el-switch @change="checkNotic" v-model="form.isSmsNotic" :disabled="true" active-value="1"
                    inactive-value="2" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">选择短信通知，则监控到异常后，系统会自动向通知对象发送相关异常短信</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否微信通知" prop="isWeChatNotic">
                  <el-switch disabled v-model="form.isWeChatNotic" active-value="1" inactive-value="2" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">是否微信通知</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item style="padding-right: 20%" label="是否限定生效周期" prop="isValidDate">
                  <el-switch v-model="form.isValidDate" :disabled="true" active-value="1" inactive-value="2">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">是否限定生效时间范围</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-if="form.isValidDate==1">
              <el-col :span="12">
                <el-form-item style="padding-right: 20%" label="日期区间" prop="startEndDate">
                  <el-date-picker v-model="form.startEndDate" :disabled="true" type="daterange" @change="changeDate(form.startEndDate)"
                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format=" yyyy-MM-dd"
                    align="right">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">生效时间范围</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.type == 'TASK_END' || form.type == 'TASK_TIMER_NO' || form.type == 'TASK_OVERTIME_NO'">
              <el-col :span="12">
                <el-form-item label="监控对象" prop="isRegionAll">
                  <el-radio v-model="form.isRegionAll" :disabled="true" label="2">周期任务</el-radio>
                  <el-radio v-model="form.isRegionAll" :disabled="true" label="3">定时任务</el-radio>
                  <!-- </el-radio-group>-->
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">该监控对象是针对Agent的，可以选择统一监控配置或部分Agent</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.isRegionAll == 2">
              <el-col :span="12">
                <el-form-item label="周期任务列表" prop="regionJsonList">
                  <el-select v-model="form.regionJsonList" :disabled="true" multiple :filterable="true" placeholder="请点击更多"
                    style="width: 337px">

                  </el-select>
                  <el-button @click="moreCycleDepend()" type="primary" style="margin-left: 10px;">
                    更多
                  </el-button>
                </el-form-item>

              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">选择要监控的周期任务</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.isRegionAll == 3">
              <el-col :span="12">
                <el-form-item label="定时任务列表" prop="regionJsonList">
                  <el-select v-model="form.regionJsonList" :disabled="true" multiple :filterable="true" placeholder="请选择"
                    style="width: 337px">
                  </el-select>
                  <el-button @click="moreCronDepend()" type="primary" style="margin-left: 10px;">
                    更多
                  </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">选择要监控的周期任务。</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.type == 'TASK_TIMER_NO' || form.type == 'TASK_COUNT_NO' || form.type == 'TASK_ERROR' || form.type == 'TASK_FAIL'">
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="指定时间点" prop="param1">
                  <el-time-select v-model="form.param1" :disabled="true" :picker-options="{ start: '00:00',step: '00:10', end: '23:50' }">
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">
                    系统在指定时间点发送监控任务未完成的异常信息
                  </div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.type == 'TASK_COUNT_NO' || form.type == 'TASK_FAIL'">
              <el-col :span="12">
                <el-form-item label="周期任务数量">
                  <el-input-number v-model="form.param2" :disabled="true" :min="1" style="width: 260px"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">当周期任务失败数量超过设定的阀值时，系统会自动通知管理员</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.type == 'TASK_FAIL'">
              <el-col :span="12">
                <el-form-item label="定时任务数量">
                  <el-input-number v-model="form.param3" :disabled="true" :min="1" style="width: 260px"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">当定时任务失败数量超过设定的阀值时，系统会自动通知管理员</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.type == 'TASK_RESULT'">
              <el-col :span="12">
                <el-form-item label="指定汇总时间点">
                  <!-- <el-input v-model="form.param1"  placeholder="请输入时间点，格式如:09:00,13:00,17:30" />-->
                  <!--<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                                      <el-form-item label="指定时间点" prop="param1">-->
                  <el-time-select v-model="form.param1" :disabled="true" :picker-options="{ start: '00:00',step: '00:10', end: '23:50' }">
                  </el-time-select>
                  <!-- </el-form-item>
                                   </el-col>-->
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">系统自动向管理员发送汇总时间段内周期作业及任务和定时任务完成情况</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.type == 'TASK_ERROR'">
              <el-col :span="12">
                <el-form-item label="超时时长（h）">
                  <el-input-number v-model="form.param2" :disabled="true" :min="1" />
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">允许任务超时最大时长</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="通知对象">
                  <el-checkbox @change="checkNotic" v-model="form.isToApp" :disabled="true" label="应用管理员"></el-checkbox>
                  <el-checkbox @change="checkNotic" v-model="form.param5" :disabled="true" label="运维管理员"></el-checkbox>
                  <el-checkbox @change="checkNotic" v-model="form.param6" :disabled="true" label="监控管理员"></el-checkbox>
                  <el-checkbox @change="checkNotic" v-model="form.isToPerson" :disabled="true" label="自定义"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">异常信息接收者。</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="form.isToPerson == true">
              <el-col :span="12">
                <el-form-item label="人员列表" prop="toUserList">
                  <el-select v-model="form.toUserList" :disabled="true" multiple :filterable="true" placeholder="请选择"
                    style="width: 400px">
                    <el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="data_from_el-col">
                <div class="hex-form-inf">
                  <div class="hex-form-inf-content">可以自定义选择某些人员进行异常接收。</div>
                  <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
  import warnConfApi from '@/api/alarm/warnConf'
  import labelInfoApi from '@/api/label/labelInfo'
  export default {
    name: 'warnConfDetail',
    props: {
      goBack: {
        type: Function,
        default: null
      },
      pkId: '',
    },
    dicts: ['app_warn_conf_type'],
    data() {
      return {
        labelList:[],
        form: {},
        userList: [],
        agentList: []
      }
    },
    created() {
      this.initUserList();
      this.initQry();
      this.getList();
    },
    methods: {
      getList(){
        labelInfoApi.queryList().then(res=>{
          this.labelList=JSON.parse(JSON.stringify(res))
        })
      },
      initUserList() {
        warnConfApi.getUserList().then(res => {
          this.userList = res;
        })
      },
      initQry() {
        warnConfApi.getEditWarnConf(this.pkId).then(res => {
          this.form = res
          let arrayObj = new Array();
          if (this.form.warnStDate != null) {
            arrayObj.push(new Date(this.form.warnStDate), new Date(this.form.warnEndDate));
          }
          this.form.startEndDate = arrayObj
          this.form.regionJsonList = res.regionJsonList;
          this.form.toUserList = res.toUserList;
          this.form.isToSys = res.isToSys;
          if (this.form.isToSys == 'true') {
            this.form.isToSys = true;
          } else {
            this.form.isToSys = false;
          }
          this.form.isToApp = res.isToApp;
          if (this.form.isToApp == 'true') {
            this.form.isToApp = true;
          } else {
            this.form.isToApp = false;
          }
          if (this.form.param5 == 'true') {
            this.form.param5 = true;
          } else {
            this.form.param5 = false;
          }
          if (this.form.param6 == 'true') {
            this.form.param6 = true;
          } else {
            this.form.param6 = false;
          }
          this.form.isToPerson = false
          if (this.form.toUserList !== null) {
            this.form.isToPerson = true
          }
        })
      },
      checkNotic() {
        if (this.form.isMailNotic == "2" && this.form.isSmsNotic == "2") {
          this.crud.notify('请至少选择一项通知方式', CRUD.NOTIFICATION_TYPE.WARNING)
          this.isSubmit = false
          return
        } else if (this.form.isToSys == false && this.form.isToApp == false && this.form.isToPerson == false) {
          this.crud.notify('请至少选择一项通知对象', CRUD.NOTIFICATION_TYPE.WARNING)
          this.isSubmit = false
          return
        } else {
          this.isSubmit = true
        }
      },
      goWarnConf() {
        this.goBack()
      },
      onOperInf: function(e) {
        let status = e.target.getAttribute('data-status');
        let previousNode = e.target.previousElementSibling;
        if ("off" == status) {
          previousNode.setAttribute('class', 'hex-form-inf-content-show');
          e.target.setAttribute('data-status', 'on');
        } else {
          previousNode.setAttribute('class', 'hex-form-inf-content');
          e.target.setAttribute('data-status', 'off');
        }
      },
    }
  }
</script>
